<div class="modal">
  <div class="modal-dialog modal-wide">
    <div class="modal-content">
      <div class="modal-header">
        <h2 ng-if="formElement.type != 'expression'">{{ 'FORM-BUILDER.POPUP.EDIT-TITLE' | translate: formElement }}</h2>
        <h2 ng-if="formElement.type == 'expression'">{{ 'FORM-BUILDER.POPUP.EXPRESSION-TITLE' | translate }}</h2>
      </div>
      <div class="modal-body">
        <div class="center-pane">
          <div class="content">
            <div class="clearfix">
              <ul class="tabs clearfix">
                <li
                  ng-repeat="tab in formTabs"
                  ng-class="{'active': tab.id == activeTab.id}"
                  ng-if="!tab.show || tab.show.indexOf(formElement.type) >= 0"
                >
                  <a ng-click="tabClicked(tab)">{{ (tab.title && (tab.title | translate)) || tab.name }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="form-group" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
          <label translate="FORM-BUILDER.COMPONENT.LABEL"></label>
          <input
            type="text"
            class="form-control"
            ng-model="formElement.name"
            ng-change="formElementNameChanged(formElement)"
            auto-focus
          />
        </div>     

        <div class="clearfix" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-change="formElementNameChanged(formElement)" ng-model="formElement.overrideId" />
                {{ 'FORM-BUILDER.COMPONENT.OVERRIDEID' | translate }}
              </label>
            </div>
          </div>

          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.ID"></label>
            <input
              type="text"
              class="form-control"
              ng-model="formElement.id"
              ng-disabled="!formElement.overrideId"
              editor-input-check
            />
          </div>        

          <div
            ng-show="formElement.type !== 'expression' && formElement.type !== 'hyperlink' && formElement.type !== 'spacer' && formElement.type !== 'horizontal-line' && formElement.type !== 'headline' && formElement.type !== 'headline-with-line'"
          >
            <div class="row">
              <div class="form-group col-md-2">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="formElement.required" />
                    {{ 'FORM-BUILDER.COMPONENT.REQUIRED' | translate }}
                  </label>
                </div>
              </div>
              <div class="form-group col-md-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="formElement.readOnly" />
                    {{ 'FORM-BUILDER.COMPONENT.READONLY' | translate }}
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div
            ng-show="formElement.type === 'functional-group' || formElement.type === 'people' || formElement.type === 'dropdown' || formElement.type === 'date' || formElement.type === 'text' || formElement.type === 'password' || formElement.type === 'multi-line-text' || formElement.type === 'integer' || formElement.type === 'decimal'"
          >
            <label translate="FORM-BUILDER.COMPONENT.PLACEHOLDER"></label>
            <input type="text" class="form-control" ng-model="formElement.placeholder" />
          </div>
        </div>

        <div
          ng-if="(activeTab.id == 'options') && (formElement.type === 'radio-buttons' || formElement.type === 'dropdown')"
        >
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.OPTIONS"></label>

            <div>
              <div ng-repeat="option in formElement.options" style="margin-bottom: 5px" class="input-group">
                <div class="input-group-addon">
                  <input
                    type="radio"
                    ng-disabled="optionsExpressionEnabled"
                    ng-model="formElement.value"
                    ng-value="option.name"
                  />
                </div>

                <input
                  id="firstDropdownOption"
                  type="text"
                  class="form-control"
                  ng-disabled="optionsExpressionEnabled"
                  ng-if="$index == 0"
                  ng-model="option.name"
                  style="background-color: #E6E6E6;"
                />
                <input
                  type="text"
                  class="form-control"
                  ng-disabled="optionsExpressionEnabled"
                  ng-if="$index > 0"
                  ng-model="option.name"
                />

                <a
                  class="input-group-addon"
                  ng-if="$index == 0"
                  data-placement="left"
                  data-type="info"
                  data-animation="am-fade-and-scale"
                  bs-tooltip="'FORM-BUILDER.COMPONENT.DROPDOWN-EMPTY-VALUE-HELP'|translate"
                >
                  <i class="glyphicon glyphicon-question-sign"></i>
                </a>

                <a
                  class="input-group-addon"
                  ng-disabled="optionsExpressionEnabled"
                  ng-click="removeOption($index)"
                  ng-if="$index > 1"
                  ><i class="icon icon-remove"></i
                ></a>
              </div>

              <div>
                <input
                  type="text"
                  class="form-control"
                  placeholder="{{ 'FORM-BUILDER.COMPONENT.ADD-OPTION' | translate }}"
                  ng-model="newOption.name"
                  ng-disabled="optionsExpressionEnabled"
                  ng-blur="confirmNewOption($event)"
                  ng-keydown="optionKeyDown($event)"
                />
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="checkbox">
              <label>
                <input
                  type="checkbox"
                  ng-init="optionsExpressionEnabled = formElement.optionsExpression != null && formElement.optionsExpression != ''"
                  ng-model="optionsExpressionEnabled"
                  ng-change="optionsExpressionChanged($event)"
                />
                {{ 'FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION-ENABLED' | translate }}
              </label>
            </div>
          </div>

          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION"></label>
            <textarea
              rows="3"
              ng-disabled="!optionsExpressionEnabled"
              ng-model="formElement.optionsExpression"
              class="form-control"
              id="readonly-text-value"
            ></textarea>
            <div
              class="subtle"
              translate="FORM-BUILDER.MESSAGE.OPTIONS-EXPRESSION-HELP"
              style="padding: 5px 0 5px 1px;"
            ></div>
          </div>
        </div>

        <!-- 表格列设置 -->
        <div ng-if="activeTab.id == 'columns'">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.COLUMN-ITEM"></label>
            <div>
              <div ng-repeat="item in formElement.params.tableCols" style="margin-bottom: 5px" class="input-group">                               
                <input
                  type="text"
                  class="form-control"
                  ng-model="item.name"
                />

                <a
                  class="input-group-addon"
                  ng-click="removeColItem($index)"
                  ><i class="icon icon-remove"></i
                ></a>
              </div>

              <div>
                <input
                  type="text"
                  class="form-control"
                  placeholder="{{ 'FORM-BUILDER.COMPONENT.ADD-COL' | translate }}"
                  ng-model="newItem.name"
                  ng-blur="confirmNewCol($event)"
                  ng-keydown="colKeyDown($event)"
                />
              </div>
            </div>
          </div>
        </div>

        <div ng-if="activeTab.id == 'upload' && formElement.type === 'upload'">
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="formElement.params.multiple" />
                {{ 'FORM-BUILDER.COMPONENT.UPLOAD-ALLOW-MULTIPLE' | translate }}
              </label>
            </div>
          </div>
        </div>
        <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'password')">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label>
            <input
              type="text"
              number-input-check
              maxlength="5"
              class="form-control"
              ng-model="formElement.params.minLength"
            />
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label>
            <input
              type="text"
              number-input-check
              maxlength="5"
              class="form-control"
              ng-model="formElement.params.maxLength"
            />
          </div>
          <div class="row">
            <div class="form-group col-md-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox" ng-model="formElement.params.passwordunmask" />
                  {{ 'FORM-BUILDER.COMPONENT.PASSWORD-UNMASK-OPTION' | translate }}?
                </label>
              </div>
            </div>
          </div>
        </div>
        <div
          ng-if="activeTab.id == 'advanced' && (formElement.type === 'text' || formElement.type === 'multi-line-text' || formElement.type === 'decimal' || formElement.type === 'integer')"
        >
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label>
            <input
              type="text"
              number-input-check
              maxlength="5"
              class="form-control"
              ng-model="formElement.params.minLength"
            />
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label>
            <input
              type="text"
              number-input-check
              maxlength="5"
              class="form-control"
              ng-model="formElement.params.maxLength"
            />
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.REGEX-PATTERN"></label>
            <div class="input-group">
              <span class="input-group-addon">/^</span>
              <input type="text" class="form-control" ng-model="formElement.params.regexPattern" />
              <span class="input-group-addon">$/</span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label translate="FORM-BUILDER.COMPONENT.MASK.TITLE"></label>
                <input type="text" class="form-control" ng-model="formElement.params.mask" />
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.TITLE</label>
                <ul>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBER</span>: <b>9</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.LETTER</span>: <b>A</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBERORLETTER</span>: <b>*</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.OPTIONAL</span>: <b>?</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.PHONE</span>: <b>(99) 9999-9999</b></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div ng-if="activeTab.id == 'advanced' && formElement.type === 'hyperlink'">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.HYPERLINK-URL"></label>
            <input type="text" class="form-control" ng-model="formElement.params.hyperlinkUrl" />
          </div>
        </div>

        <div ng-if="activeTab.id == 'general' && formElement.type === 'expression'">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.EXPRESSION"></label>
            <textarea
              rows="3"
              ng-model="formElement.expression"
              class="form-control"
              id="readonly-text-value"
            ></textarea>
            <div class="subtle" translate="FORM-BUILDER.MESSAGE.EXPRESSION-HELP" style="padding: 5px 0 5px 1px;"></div>
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.SIZE"></label>
            <select class="form-control" ng-model="formElement.params.size">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="pull-right">
          <button type="button" class="btn btn-sm btn-default" ng-click="doneEditing()">
            {{ 'GENERAL.ACTION.SAVE' | translate }}
          </button>
          <button type="button" class="btn btn-sm btn-default" ng-click="cancelEditing()">
            {{ 'GENERAL.ACTION.CANCEL' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
